<template>
  <el-dialog
    title="航班时间"
    v-model="visible"
    width="800px"
    :close-on-click-modal="false"
    append-to-body
  >
    <el-form :model="formData" ref="formRef" label-width="120px" inline>
      <el-form-item label="航班号" prop="flightNo">
        <div class="w-220px">{{ formData.flightNo }}</div>
      </el-form-item>
       <el-form-item label="机位" prop="airportStands">
        <el-input
          v-model.trim="formData.airportStands"
          placeholder="请输入机位"
          clearable
  
          class="!w-220px"
          show-word-limit
          :disabled="disabled"
        />
      </el-form-item>
      <el-form-item label="进港时间" prop="inboundTime">
        <el-time-picker
          v-model="formData.inboundTime"
          placeholder="请输入进港时间"
          clearable
          editable
          format="HH:mm"
          value-format="HH:mm"
          :disabled="disabled"
        />
      </el-form-item>
      <el-form-item label="预落时间" prop="preLandingTime">
        <el-time-picker
          v-model="formData.preLandingTime"
          placeholder="请输入预落时间"
          clearable
          editable
          format="HH:mm"
          value-format="HH:mm"
          :disabled="disabled"
        />
      </el-form-item>
     
      <el-form-item label="实落时间" prop="shiLuoTime">
        <el-time-picker
          v-model="formData.shiLuoTime"
          placeholder="请输入实落时间"
          clearable
          editable
          format="HH:mm"
          value-format="HH:mm"
          :disabled="disabled"
        />
      </el-form-item>
      <el-form-item label="起飞时间" prop="depTime">
        <el-time-picker
          v-model="formData.depTime"
          placeholder="请输入起飞时间"
          clearable
          editable
          format="HH:mm"
          value-format="HH:mm"
          :disabled="disabled"
        />
      </el-form-item>
      <el-form-item label="预飞时间" prop="yuFeiTime">
        <el-time-picker
          v-model="formData.yuFeiTime"
          placeholder="请输入预飞时间"
          clearable
          editable
          format="HH:mm"
          value-format="HH:mm"
          :disabled="disabled"
        />
      </el-form-item>
      <el-form-item label="实飞时间" prop="shiFeiTime">
        <el-time-picker
          v-model="formData.shiFeiTime"
          placeholder="请输入实飞时间"
          clearable
          editable
          format="HH:mm"
          value-format="HH:mm"
          :disabled="disabled"
        />
      </el-form-item>
      <el-form-item label="回港时间" prop="arrTime">
        <el-time-picker
          v-model="formData.arrTime"
          placeholder="请输入回港时间"
          clearable
          editable
          format="HH:mm"
          value-format="HH:mm"
          :disabled="disabled"
        />
      </el-form-item>
      <el-form-item label="预回时间" prop="yuHuiTime">
        <el-time-picker
          v-model="formData.yuHuiTime"
          placeholder="请输入预回时间"
          clearable
          editable
          format="HH:mm"
          value-format="HH:mm"
          :disabled="disabled"
        />
      </el-form-item>
      <el-form-item label="回位时间" prop="huiWei">
        <el-time-picker
          v-model="formData.huiWei"
          placeholder="请输入回位时间"
          clearable
          editable
          format="HH:mm"
          value-format="HH:mm"
          :disabled="disabled"
        />
      </el-form-item>
      <el-form-item label="实回时间" prop="shiHui">
        <el-time-picker
          v-model="formData.shiHui"
          placeholder="请输入实回时间"
          clearable
          editable
          format="HH:mm"
          value-format="HH:mm"
          :disabled="disabled"
        />
      </el-form-item>
      <el-form-item label="是否延误" prop="yanWu" width="120">
        <el-switch
          v-model="formData.yanWu"
          active-text="是"
          inactive-text="否"
          :disabled="disabled"
        />
      </el-form-item>
    </el-form>
    <!-- 去掉保存按钮，只保留取消按钮 -->
    <template #footer>
      <el-space class="pr-15 py-6">
        <el-button class="w-120px" @click="handleClose">关闭</el-button>
        <el-button type="primary" class="w-120px" @click="handleSave" :loading="loading">保存</el-button>
      </el-space>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElDialog, ElForm, ElFormItem, ElInput, ElTimePicker, ElSwitch, ElButton, ElSpace } from 'element-plus'
import { objectEq } from '@/utils/eq'
const visible = ref(false)
const formData = ref<any>({})
const formRef = ref()
const disabled = ref(false)
const loading = ref(false)

const emits = defineEmits(['success'])

const props = defineProps({
  // 可以根据需要添加props
  api: {
    type: Function,
    required: false
  }
})

const handleClose = () => {
  visible.value = false
}

const handleSave = async () => {
  // 保存逻辑
  // 这里可以添加保存数据的代码
  const valid = await formRef.value?.validate()
  if(!valid) return
  if (props.api && !objectEq(formData.value, orgFormData)) {
    loading.value = true
    try {
      await props.api(formData.value)
      // 保存成功后的操作
      // 例如关闭对话框，显示成功消息等
      emits('success', formData.value)
    } catch (error) {
      // 处理错误
      console.error('保存失败:', error)
    } finally { 
      loading.value = false
    }
  }
  visible.value = false
}

let orgFormData = {} as any
const open = (data: any, isDisabled = false) => {
  orgFormData = { ...data }
  formData.value = { ...data }
  formRef.value?.clearValidate()
  visible.value = true
  disabled.value = isDisabled
}

defineExpose({
  open
})
</script>
